  <style type="text/css">
    #div3 table td {text-align:center;}
    #div3 table td .text {width:80%;}
  </style>
  
<p />
[构建业务库]使用说明
<ol>
    <li>填写业务表名称、主键名称，并选择业务表种类(扩展表)</li>
    <li>选择所有用到的字段</li>
    <li>将字段分配到各表</li>
    <li>确定后，在数据库生成所有表，以及自动生成Dao和Service文件</li>
</ol>
<p />

<form action="<!--{$actionurl}-->" method="post">

<div id="div1">
<table width="100%" border="1">
    <tr>
        <th>业务表名称</th>
        <td><input type="text" size="20" name="table[name]" value="" /></td>
    </tr>
    <tr>
        <th>分表</th>
        <td align="left">
        <!--{foreach ($exts as $val)}-->
        <input type="checkbox" name="table[ext][]" checked value="<!--{$val}-->" /><!--{$val}-->
        <!--{/foreach}-->
        </td>
    </tr>
</table>
</div>

<div id="div2">
<table width="100%" border="1">
    <tr>
        <th></th>
        <th>描述</th>
        <th>名称</th>
        <th>类型-长度</th>
        <th>默认值</th>
    </tr>
  <!--{foreach ($bases as $val)}-->
  <tr>
        <td><input type="checkbox" name="options[]" value="<!--{$val[field_name]}-->,<!--{$val[field_remark]}-->,<!--{$val[field_type]}-->,<!--{$val[field_length]}-->,<!--{$val[field_default]}-->" /></td>
        <td align='left'><!--{$val[field_remark]}--></td>
        <td align='left'><!--{$val[field_name]}--></td>
        <td><!--{$val[field_type]}-->( <!--{$val[field_length]}--> )</td>
        <td><!--{$val[field_default]}--></td>
  </tr>
  <!--{/foreach}-->
</table>
</div>

<div id="div3">
<table width="100%" border="1" id="alltbl">
    <tr>
        <th></th>
        <th>编码</th>
        <th>描述</th>
        <th>类型</th>
        <th>长度</th>
        <th>默认值</th>
        <th>归属分表</th>
        <th>主键</th>
    </tr>
    <tbody id="alltblbody">
    </tbody>
</table>
</div>

<input type="button" value="上一步" onclick="javascript: gostep(-1)" />
<input type="button" value="下一步" onclick="javascript: gostep(1)" />
<input type="button" id="addbtn" value="增加" onclick="add_field([])" />
<input type="submit" value="提交" />

</form>

<script type="text/javascript">
var counter = 1;
function add_field(data)
{
	//data : 0 field_name, 1 field_remark, 2 field_type, 3 field_length, 4 field_default
	if (!data || data.length!=5)
	{
		data = ['','','','',''];
	}
    var tbl = $('#alltbl');
    var tbody = $('#alltblbody');
    
    var o ='';
    o +='<select name="fields['+counter+'][field_type]">';
    <!--{foreach ($fields as $e => $f)}-->
    o +='<optgroup label="<!--{$e}-->">';
       <!--{foreach ($f as $g)}-->
    o +='<option value="<!--{$g[type_name]}-->" '+(data[2]=="<!--{$g[type_name]}-->"?'selected':'')+'><!--{$g[type_name]}--></option>';
       <!--{/foreach}-->
    o +='</optgroup>';
    <!--{/foreach}-->
    o +='</select>';
    
    var b = '';
    $('input[name="table[ext][]"]').filter(':checked').each(function(){
    	b +='<input type="radio" name="fields['+counter+'][belong]" '+($(this).val()=='base'?'checked':'')+' value="'+$(this).val()+'">'+$(this).val();
    });
    
    var s = '<tr id="tr'+counter+'">';
    s +='<td><a href="javascript:;" onclick="javascript:move_up('+counter+')">向上</a> <a href="javascript:;" onclick="javascript:move_down('+counter+')">向下</a></td>';
    s +='<td><input class="text" type="text" size="10" name="fields['+counter+'][field_name]" value="'+data[0]+'" /></td>';
    s +='<td><input class="text" type="text" size="10" name="fields['+counter+'][field_remark]" value="'+data[1]+'" /></td>';
    s +='<td>'+o+'</td>';
    s +='<td><input class="text" type="text" size="4" name="fields['+counter+'][field_length]" value="'+data[3]+'" /></td>';
    s +='<td><input class="text" type="text" size="4" name="fields['+counter+'][field_default]" value="'+data[4]+'" /></td>';
    s +='<td>'+b+'</td>';
    s +='<td><input type="radio" name="key" value="'+counter+'" /></td>';
    s +='</tr>';
    $(s).appendTo(tbody);
    
    counter++;
}

var step=0; 
function gostep(offset)
{
	switch (step)
	{
		case 1:
			if ( $('input[name="table[name]"]').val() == '' )
			{
				alert('填写业务表名称！');
				$('input[name="table[name]"]').focus();
				return false;
			}
			if ( $('input[name="table[ext][]"]').filter(':checked').length == 0 )
			{
				alert('选择分表！');
                return false;
			}
			break;
		case 2:
			if ( $('input[name="options[]"]').filter(':checked').length==0 )
			{
				alert('选择至少一个字段！');
				return false;
			}
			break;
		case 3:
			break;
	}
	
    $('#div'+step).hide();
    step += offset;    
    $('#div'+step).show();
    
    switch (step)
    {
        case 3:
        	$('#alltblbody').children().remove();
            $('input[name="options[]"]').filter(':checked').each(function(){
                var d = $(this).val().split(',');
                add_field(d);
            });
            
            $('#addbtn').show();
            $(':submit').show();
            break;
        default:
        	$(':submit').hide();
        	$('#addbtn').hide();
        	break;
    }
}

//整行上移
function move_up(id)
{
	var tr = $('#tr'+id);
	var prev = tr.prev();
	if(!prev.attr('id'))  return false;
	
	tr.clone().insertBefore(prev);
	tr.remove();
}
//整行下移
function move_down(id)
{
	var tr = $('#tr'+id);
	var next = tr.next();
    if(!next.attr('id'))  return false;
    
    tr.clone().insertAfter(next);
    tr.remove();
}

$('#div1').hide();
$('#div2').hide();
$('#div3').hide();
$(':submit').hide();
$('#addbtn').hide();

gostep(1);
$('input[name="table[name]"]').focus();

var curbg = '';
$(document).ready(function(){
    $('tr').mouseover(function(){
        curbg = '';
        $(this).children().css('background-color', '#ffff99');
    }).mouseout(function(){
        $(this).children().css('background-color', curbg);
    });
});

</script>
